        <script src="__JS__/responsiveslides.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="__JS__/plyr.js" type="text/javascript" charset="utf-8"></script>
        <script src="__JS__/scrollReveal.js" type="text/javascript" charset="utf-8"></script>
       	<link rel="stylesheet" type="text/css" href="__CSS__/plyr.css"/>
       	<link rel="stylesheet" href="__CSS__/common.css" />
       	<link rel="stylesheet" type="text/css" href="__CSS__/story.css"/>
		<link rel="stylesheet" href="__CSS__/kwicks-slider.css" />

		<style>
			.a{

			}
			#qjv,#djv{
				display: none;
			}
		</style>
        <!--  -->
        <div id="showBodyLink" style="padding-top: 50px;overflow-y: scroll;">
            <div class="close_btn" id="closeShowBodyLink">X</div>
            <div class="title_k2" id="tcontent">
            </div>
        </div>


		<!-- 招聘 -->
		<div id="showBody" style="padding-top: 50px;overflow-y: scroll;opacity: 1;overflow-y: scroll;">
			<div class="close_btn" id="closeShowBody">X</div>
			<br/>
			<div id="qjv" style="background-size: 100% 100%;padding: 30px 0;">
				<div class="container">
					<div class="row  video">
						<div tabindex="0">
							<div class="plyr__video-wrapper" style="cursor: pointer;">
								<div class="plyr__captions"></div>
								<video id="videop1" class="embed-responsive-item plyr--setup" poster="{$config['QJ_VIDEO_IMG']}" src="{$config['QJ_VIDEO']}" >
									<source src="{$config['QJ_VIDEO']}" type="video/mp4">
									<!-- <source src="/path/to/video.webm" type="video/webm">-->
									<!-- Captions are optional -->
								</video>
							</div>
							<!--<button type="button" data-plyr="play" class="plyr__play-large" aria-label="Play"><svg><use xlink:href="#plyr-play"></use></svg><span class="plyr__sr-only">Play</span></button>-->
							<!--<div class="plyr__controls"><button type="button" data-plyr="play" aria-label="Play"><svg><use xlink:href="#plyr-play"></use></svg><span class="plyr__sr-only">Play</span></button><button type="button" data-plyr="pause"><svg><use xlink:href="#plyr-pause"></use></svg><span class="plyr__sr-only">Pause</span></button><span class="plyr__progress"><label for="seek6523" class="plyr__sr-only">Seek</label><input id="seek6523" class="plyr__progress&#45;&#45;seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek"><progress class="plyr__progress&#45;&#45;played" max="100" value="0" role="presentation"></progress><progress class="plyr__progress&#45;&#45;buffer" max="100" value="7.05"><span>7.05</span>% buffered</progress><span class="plyr__tooltip">00:00</span></span><span class="plyr__time"><span class="plyr__sr-only">Current time</span><span class="plyr__time&#45;&#45;current">00:39</span></span><button type="button" data-plyr="mute" aria-pressed="false"><svg class="icon&#45;&#45;muted"><use xlink:href="#plyr-muted"></use></svg><svg><use xlink:href="#plyr-volume"></use></svg><span class="plyr__sr-only">Toggle Mute</span></button><span class="plyr__volume"><label for="volume6523" class="plyr__sr-only">Volume</label><input id="volume6523" class="plyr__volume&#45;&#45;input" type="range" min="0" max="10" value="10" data-plyr="volume"><progress class="plyr__volume&#45;&#45;display" max="10" value="10" role="presentation"></progress></span><button type="button" data-plyr="captions"><svg class="icon&#45;&#45;captions-on"><use xlink:href="#plyr-captions-on"></use></svg><svg><use xlink:href="#plyr-captions-off"></use></svg><span class="plyr__sr-only">Toggle Captions</span></button><button type="button" data-plyr="fullscreen" aria-pressed="false"><svg class="icon&#45;&#45;exit-fullscreen"><use xlink:href="#plyr-exit-fullscreen"></use></svg><svg><use xlink:href="#plyr-enter-fullscreen"></use></svg><span class="plyr__sr-only">Toggle Fullscreen</span></button></div>-->
						</div>
					</div>
				</div>
			</div>
			<div id="djv" style="background-size: 100% 100%;padding: 30px 0;">
				<div class="container">
					<div class="row  video">
						<div tabindex="0">
							<div class="plyr__video-wrapper" style="cursor: pointer;">
								<div class="plyr__captions"></div>
								<video id="videop2" class=" embed-responsive-item plyr--setup" poster="{$config['DJ_VIDEO_IMG']}" src="{$config['DJ_VIDEO']}" >
									<source src="{$config['DJ_VIDEO']}" type="video/mp4">
									<!-- <source src="/path/to/video.webm" type="video/webm">-->
									<!-- Captions are optional -->
								</video>
							</div>
							<!--<button type="button" data-plyr="play" class="plyr__play-large" aria-label="Play"><svg><use xlink:href="#plyr-play"></use></svg><span class="plyr__sr-only">Play</span></button>-->
							<!--<div class="plyr__controls"><button type="button" data-plyr="play" aria-label="Play"><svg><use xlink:href="#plyr-play"></use></svg><span class="plyr__sr-only">Play</span></button><button type="button" data-plyr="pause"><svg><use xlink:href="#plyr-pause"></use></svg><span class="plyr__sr-only">Pause</span></button><span class="plyr__progress"><label for="seek6523" class="plyr__sr-only">Seek</label><input id="seek6523" class="plyr__progress&#45;&#45;seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek"><progress class="plyr__progress&#45;&#45;played" max="100" value="0" role="presentation"></progress><progress class="plyr__progress&#45;&#45;buffer" max="100" value="7.05"><span>7.05</span>% buffered</progress><span class="plyr__tooltip">00:00</span></span><span class="plyr__time"><span class="plyr__sr-only">Current time</span><span class="plyr__time&#45;&#45;current">00:39</span></span><button type="button" data-plyr="mute" aria-pressed="false"><svg class="icon&#45;&#45;muted"><use xlink:href="#plyr-muted"></use></svg><svg><use xlink:href="#plyr-volume"></use></svg><span class="plyr__sr-only">Toggle Mute</span></button><span class="plyr__volume"><label for="volume6523" class="plyr__sr-only">Volume</label><input id="volume6523" class="plyr__volume&#45;&#45;input" type="range" min="0" max="10" value="10" data-plyr="volume"><progress class="plyr__volume&#45;&#45;display" max="10" value="10" role="presentation"></progress></span><button type="button" data-plyr="captions"><svg class="icon&#45;&#45;captions-on"><use xlink:href="#plyr-captions-on"></use></svg><svg><use xlink:href="#plyr-captions-off"></use></svg><span class="plyr__sr-only">Toggle Captions</span></button><button type="button" data-plyr="fullscreen" aria-pressed="false"><svg class="icon&#45;&#45;exit-fullscreen"><use xlink:href="#plyr-exit-fullscreen"></use></svg><svg><use xlink:href="#plyr-enter-fullscreen"></use></svg><span class="plyr__sr-only">Toggle Fullscreen</span></button></div>-->
						</div>
					</div>
				</div>
			</div>
		</div>

		<div id="top" class="callbacks_container">
	        <div>
				<!--<img style="width: 100%;" src="__IMG__/story_banner.jpg" alt="" />-->
				<img style="width: 100%;" src="{$ad['ad_image_url']}" alt="" />
	        </div>
	    </div>

		<div class="instock" data-scroll-reveal="enter top over 1s and move 200px after 0s" >
			<div class="container">
				<div class="col-md-6 chuk tipImgLink" data-content="{$story[0]['content']}">
					<div class="about-grid-info" style="float: right;">
						<img src="{$story[0]['image']}" alt="" />
						<div class="agileits-caption"> 
							<i class="fa fa-thumbs-up" aria-hidden="true"></i>
							<p>{$story[0]['center_name']}</p>
						</div>
					</div>
					<span class="blanc-info" style="text-align: left;">
						<h4>{$story[0]['name']}</h4>
						<h5>{$story[0]['date']}</h5>
					</span>
				</div>
				<div class="col-md-6 blanc tipImgLink" data-content="{$story[1]['content']}">
					<div class="about-grid-info ">
						<img src="{$story[1]['image']}" alt="" />
						<div class="agileits-caption"> 
							<i class="fa fa-thumbs-up" aria-hidden="true"></i>
							<p>{$story[1]['center_name']}</p>
						</div>
					</div>
					<span class="blanc-info" style="text-align: right;">
						<h4>{$story[1]['name']}</h4>
						<h5>{$story[1]['date']}</h5>
					</span>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	    
	    <div class="instock" data-scroll-reveal="enter top over 1s and move 200px after 0s" >
			<div class="container">
				<div class="col-md-6 chuk tipVideo" id="video1" data-video="1">
					<div class="about-grid-info " style="float: right;">
						<img src="{$story[2]['image']}" alt="" />
						<div class="agileits-caption"> 
							<i class="fa fa-thumbs-up" aria-hidden="true"></i>
							<p>{$story[2]['center_name']}</p>
						</div>
					</div>
					<span class="blanc-info" style="text-align: left;">
						<h4>{$story[2]['name']}</h4>
						<h5>{$story[2]['date']}</h5>
					</span>
				</div>
				<div class="col-md-6 blanc tipVideo" id="video2" data-video="2">
					<div class="about-grid-info ">
						<img src="{$story[3]['image']}" alt="" />
						<div class="agileits-caption"> 
							<i class="fa fa-thumbs-up" aria-hidden="true"></i>
							<p>{$story[3]['center_name']}</p>
						</div>
					</div>
					<span class="blanc-info" style="text-align: right;">
						<h4>{$story[3]['name']}</h4>
						<h5>{$story[3]['date']}</h5>
					</span>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		
		<div class="instock" data-scroll-reveal="enter top over 1s and move 200px after 0s" >
			<div class="container">
				<div class="col-md-6 chuk tipImg" data-content="{$story[4]['content']}">
					<div class="about-grid-info " style="float: right;">
						<img src="{$story[4]['image']}" alt="" />
						<div class="agileits-caption"> 
							<i class="fa fa-thumbs-up" aria-hidden="true"></i>
							<p>{$story[4]['center_name']}</p>
						</div>
					</div>
					<span class="blanc-info" style="text-align: left;">
						<h4>{$story[4]['name']}</h4>
					</span>
				</div>
				<div class="col-md-6 blanc tipImg" data-content="{$story[5]['content']}">
					<div class="about-grid-info ">
						<img src="{$story[5]['image']}" alt="" />
						<div class="agileits-caption"> 
							<i class="fa fa-thumbs-up" aria-hidden="true"></i>
							<p>{$story[5]['center_name']}</p>
						</div>
					</div>
					<span class="blanc-info" style="text-align: right;">
						<h4>{$story[5]['name']}</h4>
					</span>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	    
		<div class="instock" data-scroll-reveal="enter top over 1s and move 200px after 0s" >
			<div class="container">
				<div class="col-md-6 chuk tipImg" data-content="{$story[6]['content']}">
					<div class="about-grid-info " style="float: right;">
						<img src="{$story[6]['image']}" alt="" />
						<div class="agileits-caption"> 
							<i class="fa fa-thumbs-up" aria-hidden="true"></i>
							<p>{$story[6]['center_name']}</p>
						</div>
					</div>
					<span class="blanc-info" style="text-align: left;">
						<h4>{$story[6]['name']}</h4>
					</span>
				</div>
				<div class="col-md-6 blanc tipImg" data-content="{$story[7]['content']}">
					<div class="about-grid-info ">
						<img src="{$story[7]['image']}" alt="" />
						<div class="agileits-caption"> 
							<i class="fa fa-thumbs-up" aria-hidden="true"></i>
							<p>{$story[7]['center_name']}</p>
						</div>
					</div>
					<span class="blanc-info" style="text-align: right;">
						<h4>{$story[7]['name']}</h4>
					</span>
				</div>
			</div>
		</div>
		
		<div class="result" id="outdiv">
		    <div class="indiv">
		        <img class="imgresult" id="bigimg" src="">
		    </div>  
		</div> 
		<div class="clearfix"> </div>
		

	<script>plyr.setup();</script>
    <script>
        (function () {
            window.scrollReveal = new scrollReveal({reset: true, move: '50px'});
        })();
    </script>

	<script type="text/javascript">
		function showImg(outdiv,indiv,bigimg,thiselement){
		    var winW = $(window).width();
		    var winH = $(window).height();
		    var src = $(thiselement).attr('src');
		    $(bigimg).attr("src",src);
		    $("<img/>").attr("src",src).load(function(){
		        var imgW = this.width; 
		        var imgH = this.height;
		        var scale= imgW/imgH;
		        if( imgW > winW ){
		            $(bigimg).css("width","100%").css("height","auto");
		            imgH = winW/scale;
		            var h=(winH-imgH)/2;            
		            $(indiv).css({"left":0,"top":h});
		        }else{        
		            $(bigimg).css("width",imgW+'px').css("height",imgH+'px');
		            var w=(winW-imgW)/2;
		            var h=(winH-imgH)/2;      
		            $(indiv).css({"left":w,"top":h});
		        }
		              
		        $(outdiv).fadeIn("fast");
		        $(outdiv).click(function(){
		            $(this).fadeOut("fast");
		        });                             
		    });
		}
		$('.tipImg').click(function(){
		    // var thiselement=$(this).children('div').children('img');
		    // showImg("#outdiv",".indiv","#bigimg",thiselement);
		    var content = $(this).attr('data-content');
		    $('#tcontent').html(content);
            $('html,body').addClass('ovfHiden');
            $('#showBodyLink').show();
            $('body').css({
                "overflow-x":"hidden",
                "overflow-y":"hidden"
            });
		});
        $('#closeShowBodyLink').click(function(){
            $('#showBodyLink').hide();
            var videop1 = document.getElementById("videop1");
            videop1.pause();
            var videop2 = document.getElementById("videop2");
            videop2.pause();
            $('body').css({
                "overflow":"auto",
            });
        });
		$('.tipVideo').click(function(){
			// alert('视频资源');
		    // $(outdiv).fadeIn("fast");
	        // $(outdiv).click(function(){
	        //     $(this).fadeOut("fast");
	        // });
			var video_type = $(this).attr('data-video');
			if(1==video_type){
			    $('#qjv').show();
			    $('#djv').hide();
			}else{
                $('#djv').show();
                $('#qjv').hide();
			}
            $('html,body').addClass('ovfHiden');
            $('#showBody').show();
            $('body').css({
                "overflow-x":"hidden",
                "overflow-y":"hidden"
            });
		});
        $('#closeShowBody').click(function(){
            $('#showBody').hide();
            var videop1 = document.getElementById("videop1");
            videop1.pause();
            var videop2 = document.getElementById("videop2");
            videop2.pause();
            $('body').css({
                "overflow":"auto",
            });
        });
        $('.tipImgLink').click(function(){
            var content = $(this).attr('data-content');
            console.log(content);
            window.open(content);
        });
	</script>

	<script>
		$('#story').addClass('active');
	</script>